<!--商品类型-->
<template>
  <div class="warehouse_box">
    <!--   查询模块-->
    <div class="search_box">
      <el-form
        ref="searchDate"
        :inline="true"
        :model="searchDate"
        class="demo-form-inline"
      >
        <el-form-item label="关键词：" prop="orderNumber">
          <el-input
            v-model="searchDate.orderNumber"
            placeholder="请输入关键词"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户：" prop="userName">
          <el-select v-model="searchDate.userName" placeholder="请选择用户">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="奥巴马妈妈" value="奥巴马妈妈"></el-option>
            <el-option label="用户1" value="用户1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品：" prop="productName">
          <el-select v-model="searchDate.productName" placeholder="请选择商品">
            <el-option label="全部" value="全部"></el-option>
            <el-option label="水中贵族" value="水中贵族"></el-option>
            <el-option
              label="娃哈哈矿物质水"
              value="娃哈哈矿物质水"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型：" prop="operationType">
          <el-select
            v-model="searchDate.operationType"
            placeholder="请选择操作类型"
          >
            <el-option label="全部" value="全部"></el-option>
            <el-option label="重置用户商品" value="重置用户商品"></el-option>
            <el-option label="用户预约" value="用户预约"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作内容：" prop="operationContent">
          <el-input
            v-model="searchDate.operationContent"
            placeholder="请输入操作内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--   数据列表-->
    <div class="commodity_list">
      <el-table
        :data="showDate"
        :header-cell-style="{
          background: 'rgba(227,189,189,0.53)',
          border: 'none',
          color: '#000',
        }"
        border
        style="width: 100%"
      >
        <el-table-column label="ID" prop="commodityId" width="80">
        </el-table-column>
        <el-table-column label="订单号" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.orderNumber !== ''">{{
              scope.row.orderNumber
            }}</span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.userName !== ''">{{
              scope.row.userName
            }}</span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.productName !== ''">{{
              scope.row.productName
            }}</span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column label="变更前/后商品数" prop="quantity" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.quantity">
              <span class="orange_text">{{ scope.row.quantity.old }}</span>
              /
              <span class="red_text">{{ scope.row.quantity.later }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="变更前/后已使用额度" prop="limit" width="170">
          <template slot-scope="scope">
            <span v-if="scope.row.limit">
              <span class="orange_text">{{ scope.row.limit.old }}</span>
              /
              <span class="red_text">{{ scope.row.limit.later }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="变更前/后在手商品数"
          prop="inventory"
          width="170"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.inventory">
              <span class="orange_text">{{ scope.row.inventory.old }}</span>
              /
              <span class="red_text">{{ scope.row.inventory.later }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作类型" prop="operationType">
        </el-table-column>
        <el-table-column label="操作内容" prop="operationContent" width="150">
        </el-table-column>
        <el-table-column label="订单类型" prop="orderType"> </el-table-column>
        <el-table-column label="操作人" prop="operationUser"> </el-table-column>
        <el-table-column
          label="操作时间"
          prop="operationTime"
          sortable
          width="160"
        >
        </el-table-column>
      </el-table>
      <!--      分页-->
      <div class="list_bottom">
        <div class="list_length">
          共<span>{{ list.length }}</span
          >条
        </div>
        <el-pagination
          :current-page="currentPage"
          :page-count="10"
          :page-size="pageSize"
          :page-sizes="[15, 20, 50, 100]"
          :total="list.length"
          background
          layout=" prev, pager, next,sizes,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 查询表单
      searchDate: {
        productName: "",
        orderNumber: "", // 订单编号
        userName: "",
        operationType: "", // 操作类型
        operationContent: "", // 操作内容
      },
      currentPage: 1, // 当前页数
      pageSize: 15, // 每一页的数据个数
      showDate: [],
      list: [],
    };
  },
  created() {
    this.searchDate.productName = this.$route.query.productName;
    this.showTable();
  },
  mounted() {},
  computed: {
    ...mapState(["commodityRecord"]),
  },
  methods: {
    // 数据切片分页渲染表格
    showTable() {
      // 加载表格数据,模拟请求到数据
      if (
        this.searchDate.productName &&
        this.searchDate.productName !== "" &&
        this.searchDate.productName !== "全部"
      ) {
        this.list = this.commodityRecord.filter(
          (item) => item.productName.indexOf(this.searchDate.productName) > -1
        );
        this.showDate = this.list.slice(
          this.pageSize * (this.currentPage - 1),
          this.pageSize * this.currentPage
        );
      } else {
        this.list = this.commodityRecord.slice(
          this.pageSize * (this.currentPage - 1),
          this.pageSize * this.currentPage
        );
        this.showDate = this.list;
      }
    },
    //pageSize 改变时触发
    handleSizeChange(val) {
      // .slice((currentPage-1)*pageSize,currentPage*pageSize)
      this.pageSize = val;
      this.showTable();
    },
    // currentPage 改变时会触发的函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showTable();
    },
    // 查询
    onSubmit() {
      this.showTable();
      this.$message({
        message:
          "订单号：" +
          this.searchDate.orderNumber +
          "商品:" +
          this.searchDate.productName,
        type: "success",
      });
    },

    // 重置查询表单
    resetForm() {
      this.$refs.searchDate.resetFields();
    },
  },
};
</script>
